<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
    <link rel="stylesheet" type="text/css" href="../../css/vant_new.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/local.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant_new.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>

    <style>
        /* .content {
            background: #efefef;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        } */

        .row {
            position: relative;
            margin-bottom: 10px;
        }

        .row .img {
            width: 100px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
            /* padding: 0 10px; */
        }

        .row .img img {
            width: 100%;
            height: 100%;
        }

        .row .desc {
            padding-right: 5px;
            padding-left: 10px;
        }

        .row .desc .title {
            font-size: 14px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .row .desc .title .hot {
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .row .desc .sub-title {
            font-size: 12px;
            color: #969799;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .row .desc .sub-title * {
            vertical-align: middle;
        }

        .sku {
            padding: 3px 0;
            font-size: 13px;
            color: #9e9e9e;
        }

        .price {
            text-align: right;
            font-size: 14px;
            line-height: initial;
        }

        .van-search {
            background: transparent !important;
            padding: 0;
        }

        .van-nav-bar__title {
            margin: 0 10px 0 50px;
            max-width: none;
        }

        .van-nav-bar__left {
            height: 46px;
        }

        .van-dropdown-menu {
            height: 40px;
        }



        .pd {
            padding: 5px 10px 5px 10px;
        }

        .pd>div {
            overflow: hidden;
            border-radius: 8px;
        }

        .f-r {
            text-align: right;
            color: #9e9e9e;
            font-size: 13px;
        }

        .button {
            text-align: right;
            padding: 5px 0;
        }

        .button button {
            margin-left: 10px;
        }

        .code {
            font-weight: 700;
            font-size: 15px;
            padding-bottom: 8px;
        }

        .close {
            float: right;
            color: #ff976a;
            font-size: 13px;
            font-weight: 500;
        }

        .van-button--small {
            height: 26px;
        }

        .tab {
            overflow: hidden;
            position: relative;
        }

        .tab>div {
            width: 20%;
            float: left;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 13px;
        }

        .tab .on {
            border-bottom: 3px solid #cd1b21;
            color: #cd1b21;
        }

        .red .van-action-sheet__subname {
            color: #cd1b21;
        }

        .com{
            padding: 5px 0 5px 0;
            text-align: center;
            font-size: 13px;
            color: #cd1b21;
            margin: 0 15px;
            border-top: 1px solid rgba(235,237,240,0.6);
        }
        .com>*{
            vertical-align: middle;
        }
    </style>


</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head head-index" left-arrow @click-left="onClickLeft">
                <div slot="title" style="margin-top: 10px;">
                    <form action="" style="margin-top:-3px;">
                        <van-search placeholder="搜索订单" v-model="filter.searchKey" shape="round" @search="getList">
                        </van-search>
                    </form>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="tab">
                        <div @click="toggleStatus(0)" :class="filter.orderStatus == 0?'on':''">全部</div>
                        <div @click="toggleStatus(1)" :class="filter.orderStatus == 1?'on':''">待付款</div>
                        <div @click="toggleStatus(2)" :class="filter.orderStatus == 2?'on':''">待发货</div>
                        <div @click="toggleStatus(3)" :class="filter.orderStatus == 3?'on':''">待收货</div>
                        <div @click="toggleStatus(21)" :class="filter.orderStatus == 21?'on':''">待评价</div>
                    </div>
                    <div style="height:calc(100% - 40px);overflow: auto;">
                        <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
                            @load="listOnLoad">

                            <div class="pd" v-for="row in orderList" @click="intoDetail(row)"
                                v-if="row.node && row.node.length">
                                <van-cell>
                                    <div class="code"><img src="../../image/p.png" style="width: 30px;vertical-align: middle;" v-if="row.IsDistribution" />{{row.OrderId}}
                                        <span class="close" v-if="row.OrderStatus == 1">等待买家付款</span>
                                        <span class="close" v-else-if="row.OrderStatus == 2">买家已付款</span>
                                        <span class="close" v-else-if="row.OrderStatus == 3">仓库已发货</span>
                                        <span class="close"
                                            v-else-if="row.OrderStatus == 4 && row.CloseReason != '订单已退款完成'">交易关闭</span>
                                        <span class="close"
                                            v-else-if="row.OrderStatus == 4 && row.CloseReason == '订单已退款完成'">退款成功</span>
                                        <span class="close" v-else-if="row.OrderStatus == 5">交易成功</span>
                                        <span class="close" v-else-if="row.OrderStatus == 6">退款申请中</span>
                                        <span class="close" v-else-if="row.OrderStatus == 18">退款失败</span>
                                    </div>
                                    <div class="row flex-box" v-for="(item,itemIndex) in row.node" v-show="!row.isCom?itemIndex < 6 :true">
                                        <div class="img">
                                            <img
                                                v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
                                        </div>
                                        <div class="flex-main desc">
                                            <div class="title">{{item.ProductName}}</div>
                                            <div class="sku">{{item.SKU}}</div>
                                        </div>
                                        <div class="price">
                                            <div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span>
                                            </div>
                                            <div style="color:#9e9e9e">x{{item.ShipmentQuantity}}</div>
                                        </div>
                                    </div>
                                    <div class="com" v-show="!row.isCom && row.node.length >= 5"
                                        @click.stop="showComplete(row)">
                                        <span>显示所有商品&nbsp;</span>
                                        <van-icon name="arrow-down"></van-icon>
                                    </div>
                                    <div class="f-r">共{{row.node.length}}件商品&nbsp;&nbsp;合计：￥&nbsp;
                                        <span style="font-size: 16px;">{{row.OrderTotal}}</span>&nbsp;
                                        <span v-if="row.Freight">（含运费￥&nbsp;{{row.Freight}}）</span>
                                    </div>
                                </van-cell>
                            </div>

                            <div v-show="!orderList.length"
                                style="font-size: 14px;color:#9e9e9e;text-align:center;padding: 20px 0;">暂无订单</div>
                        </van-list>
                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var OrderNo = '';

        var type = api.pageParam.type;

        var h_userId = api.pageParam.h_userId;

        var aliPayPlus = api.require('aliPayPlus');
        var wxPay = api.require('wxPay');

        api.addEventListener({
            name: 'refreshOrderList'
        }, function (ret, err) {
            vm.getList();
        });

        Vue.use(vant.Lazyload, {
			loading: '../../image/no.png',
			error: '../../image/no.png'
		});

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                showPageType: false,
                serverIP: 'http://' + FLD.serverIP,
                pageTypes: [{
                    name: '支付宝'
                }, {
                    name: '微信'
                }, {
                    name: '余额支付',
                    subname: '',
                    className: ''
                }],
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                listLoading: false,
                listFinished: true,
                filter: {
                    orderStatus: type,
                    pageIndex: 1,
                    pageSize: 20,
                    searchKey: '',
                    h_userId:h_userId
                },
                orderList: [],
                undealNum: {
                    num1: 0,
                    num2: 0,
                    num3: 0,
                    num4: 0,
                    num5: 0,
                }
            },
            created: function () {
                var that = this;

                var appTop = parseInt(window.localStorage.getItem('safeAreaTop'));

                if (appTop) {
                    $('.head-index').css({
                        'padding-top': appTop + 'px',
                        'height': appTop + 50 + 'px',
                        'line-height': '40px'
                    })
                }
                // that.getUndealNum();
                that.getList();
            },
            methods: {
                showComplete(row) {
                    var that = this;
                    if (typeof row.checked === 'undefined') {
                        that.$set(row, 'isCom', true);
                    } else {
                        row.isCom = true;

                    }
                },
                getUndealNum() {
                    var that = this;
                    FLD.ajax('sp_statusOrderCount', {h_userId:h_userId}, function (res) {
                        that.undealNum.num1 = res.ds[0].num1;
                        that.undealNum.num2 = res.ds1[0].num2;
                        that.undealNum.num3 = res.ds2[0].num3;
                        that.undealNum.num4 = res.ds3[0].num4;
                        that.undealNum.num5 = res.ds4[0].num5;
                    })
                },
                toggleStatus(index) {
                    var that = this;
                    that.filter.orderStatus = index;
                    that.getList();
                },
                getList() {
                    var that = this;
                    that.showLoading = true;
                    that.filter.pageIndex = 1;
                    FLD.ajax('sp_getOrderList', that.filter, function (res) {
                        that.showLoading = false;
                        that.orderList = res.ds;
                        that.listFinished = false;
                        var ids = [];
                        for (var i in res.ds) {
                            ids.push('\'' + res.ds[i].OrderId + '\'');
                        }
                        that.getProducts(ids, that.filter.pageIndex);
                    })
                },
                listOnLoad(row) {
                    var that = this;
                    that.filter.pageIndex++;
                    FLD.ajax('sp_getOrderList', that.filter, function (res) {
                        that.listLoading = false;
                        if (res.ds.length == 0) {
                            that.listFinished = true;
                        }
                        that.orderList = that.orderList.concat(res.ds);
                        var ids = [];
                        for (var i in res.ds) {
                            ids.push('\'' + res.ds[i].OrderId + '\'');
                        }
                        that.getProducts(ids, that.filter.pageIndex);
                    })
                },
                getProducts(ids, pageIndex) {
                    var that = this;
                    if (!ids.length) return;
                    FLD.ajax('sp_GetOrderItemByOrderIds', { orderIds: ids.join() }, function (res) {
                        var n = (pageIndex - 1) * that.filter.pageSize;
                        for (var i = n; i < n + that.filter.pageSize; i++) {
                            if (that.orderList[i]) {
                                that.$set(that.orderList[i], 'node', [])
                                for (var j in res.ds) {
                                    if (that.orderList[i].OrderId == res.ds[j].OrderId) {
                                        that.orderList[i].node.push(res.ds[j])
                                    }
                                }
                            }


                        }
                    })
                },
                intoDetail(row) {
                    var that = this;
                    api.openWin({
                        name: 'orderDetail',
                        url: 'orderDetail.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            OrderId: row.OrderId,
                            h_userId:h_userId
                        }
                    })
                },
                
                onClickLeft() {

                    api.closeWin();
                }
            }
        })
    };
</script>

</html>